<template>
	<view class="login-bg">
		<view class="bg2">
			<view style="width: 100%;display: flex;padding-top: 10%;height: 50rpx;">
				<image src="../../static/dui.png" class="dui"></image>
				<view class="dui_text">累计成交量 <text style="font-size: 48rpx;">{{cj_number}}</text> </view>
			</view>
		</view>
		
		<view class="t-box">
			<view style="font-weight: 700;margin-bottom: 20rpx;">第一步</view>
			<view class="kuang">
				<view class="k_left">游戏名称</view>
				<view class="k_right">
					<view style="width: 90%;height: 60rpx;" v-if="game_list.length!=0">
						<picker :range="game_list" @change="onChange">
					      <view style="height: 60rpx;line-height: 60rpx;">{{game}}</view>
					    </picker>
					</view>
					<view style="width: auto;height: 60rpx;">
						<image src="../../static/jiantou.png" class="jiantou"></image>
					</view>
				</view>
			</view>
			<view class="kuang">
				<view class="k_left">服务器</view>
				<view class="k_right">
					<view style="width: 90%;height: 60rpx;" v-if="device_list.length!=0">
						<picker :range="device_list" @change="onChange2">
					      <view style="height: 60rpx;line-height: 60rpx;">{{device}}</view>
					    </picker>
					</view>
					<view style="width: auto;height: 60rpx;">
						<image src="../../static/jiantou.png" class="jiantou"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer" @click="sub">
			<view class="btn">下一步</view>
		</view>
		
		
		<custom-tab-bar :items="tabItems" :currentIndex="currentTab" @item-click="onTabClick"
		        :color="color" :selectedColor="selectedColor"></custom-tab-bar>
	</view>
</template>

<script>
	import CustomTabBar from '@/uni_modules/niceui-tabBar/components/niceui-tabBar/niceui-tabBar.vue';
	import tabbar from '@/uni_modules/niceui-tabBar/common/tabbar.js'
	export default {
	    components: {
			CustomTabBar
	    },
	    data() {
	        return {
				currentTab: 2, // 当前选中的tab索引
				tabItems:tabbar.tabItems,
				color:tabbar.color,
				selectedColor:tabbar.selectedColor,
				
				game:'选择游戏',
				game_list:[],
				
				device:'选择服务器',
				device_list:['选择服务器'],
				
				cj_number:0
			}
		},
		onLoad() {
			this.game_select()
			this.cj_count()
		},
		methods: {
			onTabClick(index) { // 切换tab的函数，当选中某个tab时触发
			   //this.currentTab = index;  
			   if(index!=this.currentTab){
					uni.redirectTo({
						url:this.tabItems[index].pagePath
					})
			   }
			 },
			 
			 cj_count(){
				 var that = this
				 uni.request({
					url:getApp().globalData.host+'srapi/home/cj_count',
					method:'POST',
					data: { // 请求的参数
					},
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					success: (res) => {
						that.cj_number = res.data.data
					}
				})
			 },
			 
			
			 game_select(){
				 var that = this
				 uni.request({
					url:getApp().globalData.host+'srapi/home/game_select',
					method:'POST',
					data: { // 请求的参数
					},
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					success: (res) => {
						if(res.data.data){
							var game_list = res.data.data
							var arr = ['选择游戏'];
							for(var i=0;i<game_list.length;i++){
								arr.push(game_list[i]['title'])
							}
							that.game_list = arr
						}
					}
				 })
			 },
			 onChange(e){
			 	this.game = this.game_list[e.detail.value]
				
				var that = this
				uni.request({
					url:getApp().globalData.host+'srapi/home/device_select',
					method:'POST',
					data: { // 请求的参数
						game:that.game
					},
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					success: (res) => {
						if(res.data.data){
							var device_list = res.data.data
							var arr = ['选择服务器'];
							for(var i=0;i<device_list.length;i++){
								arr.push(device_list[i]['title'])
							}
							that.device_list = arr
						}
					}
				})
				
				
			 },
			 onChange2(e){
			 	this.device = this.device_list[e.detail.value]
			 },
			 
			 sub(){
				 var that = this
				 if(!uni.getStorageSync('member')){
				 	 uni.showToast({ title: '请登录！', icon: 'none' });
				 	 setTimeout(function(){
				 		 uni.navigateTo({
				 			url:'/pages/my/login'
				 		 })
				 	 },2000)
					return
				 }
				 if(this.game=='选择游戏'){
					 uni.showToast({ title: '请选择游戏！', icon: 'none' });
					 return
				 }
				 if(this.device=='选择服务器'){
					 uni.showToast({ title: '请选择服务器！', icon: 'none' });
					 return
				 }
				 uni.navigateTo({
				 	url:'/pages/index/add2?game='+this.game+'&device='+this.device
				 })
			 }
			 
		}
	}
</script>

<style>
	/* #ifdef H5 */
		page, .uni-page-wrapper { background-color: #f8f8f8; } /* 仅在H5平台生效 */
		/* #endif */
		
		page {
		    padding-bottom: 140rpx;
		}
		
		.login-bg {
			background-color: #f8f8f8;
		}
		.bg2{
			height: 276rpx;
			width: 100%;
			background-size: 100% 100%;
			background-image: url(../../static/fabu.png);
		}
		.dui{
			width: 36rpx;
			height: 36rpx;
			margin-top: 18rpx;
			margin-left: 5%;
		}
		.dui_text{
			color: #fff;line-height: 50rpx;
		}
		.t-box{
			width: 640rpx;
			padding: 35rpx;
			margin: 0 auto;
			margin-top: -5vh;
			font-size: 28rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.15);
			z-index: 9;
		}
		.footer{
			width: 100%;
			height: 120rpx;
			position: fixed;
			background-color: #fff;
			border: 0px;
			bottom: 152rpx ;
			left: 0%;
		}
		.btn{
			width: 700rpx;
			border-radius: 20rpx;
			background-color: #609DF6;
			color: #fff;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			margin: auto;
			margin-top: 20rpx;
		}
		.kuang{
			width: 100%;display: flex;margin-top: 50rpx; height: 60rpx;
		}
		.k_left{
			width: 48%;
			padding-left: 2%;
			text-align: left;
			height: 60rpx;
			line-height: 60rpx;
		}
		.k_right{
			width: 48%;
			padding-right: 2%;
			text-align: right;
			color: #999;
			display: flex;
			height: 60rpx;
			line-height: 60rpx;
		}
		.jiantou{
			width: 20rpx;
			height: 20rpx;
			margin-top: 20rpx;
			margin-left: 5rpx;
		}
</style>